<template>
  <div class="upload">
    <!-- params 配置说明 -->
    <!--
      url：上传地址
      type：上传类型  btn:按钮上传   list:缩略图上传
      btnType：按钮样式
      btnIcon：按钮图标
      btnName：按钮名称
      width：按钮宽度
      display：显示列表  none
      data：参数
      showList：是否展示上传列表  true
      limit：上传个数限制
      multiple：是否多选
      drag：是否支持拖拽  false
      disabled：是否禁用  false
      fileType:[] 上传格式 ['jpg','png','gif','jpeg','zip','rar','','']
    -->

    <!-- 按钮上传图片 -->
    <div v-if="params.type == 'btn'" class="uploadBtn">
      <el-button :type="params.btnType ? params.btnType : 'primary'" :icon="params.icon" @click="btnUpload()"
        size="mini" :disabled="disabled1" :style="{ width: params.width + 'px' }">
        {{ params.btnName ? params.btnName : '上传' }}
      </el-button>
      <el-upload ref="btnUpload" :headers="headers" :action="params.url"
        :style="{ display: params.display ? params.display : 'none' }" :file-list="fileList1"
        :show-file-list="params.showList" :data="params.data" :drag="params.drag" :multiple="params.multiple"
        :limit="params.limit" :before-upload="beforeUpload" :on-change="onChange1" :on-success="onSuccess1"
        :on-remove="onRemove1" :on-preview="onPreview1">
      </el-upload>
    </div>

    <!-- 缩略图列表上传图片 -->
    <div v-else-if="params.type == 'list'">
      <el-upload ref="listUpload" list-type="picture-card" :headers="headers" :action="params.url"
        :class="{ hide: hide }" :data="params.data" :file-list="fileList2" :limit="params.limit" :disabled="disabled2"
        :before-upload="beforeUpload" :on-change="onChange2" :on-success="onSuccess2" :on-preview="onPreview2"
        :on-remove="onRemove2">
        <!-- 加号图案 -->
        <!-- <i slot="default" class="el-icon-plus"></i> -->
        <!-- 相机图案 -->
        <i class="el-icon-camera-solid"></i>
      </el-upload>
    </div>

    <!-- 预览图片弹窗 -->
    <el-dialog :title="imgModal.title" :visible="imgModal.isShow">
      <img width="100%" :src="imgModal.imgUrl">
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "upload",
  props: {
    params: {
      type: Object,
      required: true,
      default: () => { }
    },
    imgListData: {
      type: Array,
      default: () => []
    },
    disabled: {
      type: Boolean,
    }
  },
  data() {
    return {
      // 请求头token
      headers: { 'Auth-Token': 'vlVwiSwMnvzL/175QmV2YliHoe94Vo8fT+uEeUcfciCeAhgwPHhNiQ==' },
      // btn
      disabled1: false,
      fileList1: [],
      // list
      hide: false,//缩略图隐藏上传按钮
      fileList2: [],
      disabled2: false,
      isChecked: true,

      //预览弹窗
      imgModal: {
        show: false,
        title: '预览图片',
        imgUrl: ""
      },
    }
  },
  watch: {
    imgListData() {
      if (this.imgListData.length > 0) {
        this.handlefileList();
      }
    },
  },
  mounted() { },
  methods: {
    /************* 按钮上传图片 *************/
    // 打开上传
    btnUpload() {
      this.$refs['btnUpload'].$children[0].$refs.input.click();
    },
    // 上传成功
    onSuccess1(res, file, fileList) {
      this.fileList1 = fileList;
      res.data.name = file.name;
      this.$emit("fileList", res.data);
    },
    onChange1(file, fileList) {
      this.disabled1 = this.fileList1.length >= this.params.limit;
    },
    // 删除
    onRemove1(file, fileList) {
      this.fileList1 = fileList;
      this.$emit('removeFile', file.response);
    },
    // 预览
    onPreview1(file) {
      this.$emit('preview', file);
    },

    /************* 缩略图上传图片 *************/
    // 上传成功
    onSuccess2(res, file, fileList) {
      this.fileList2 = fileList;
      res.data.name = file.name;
      this.$emit("imgList", res.data);
    },
    // 达到上传限制，隐藏上传入口
    onChange2(file, fileList) {
      this.hide = this.fileList2.length >= this.params.limit;
    },
    // 删除
    onRemove2(file, fileList) {
      this.fileList2 = fileList;
      this.hide = this.fileList2.length >= this.params.limit;
      let imgUrl = file.response ? file.response.data.fileByteUrl : file.url;
      const data = { name: file.name, url: imgUrl };
      this.$emit('removeImg', data);
    },
    // 预览
    onPreview2(file) {
      this.imgModal.imgUrl = file.response ? file.response.data.fileByteUrl : file.url;
      this.imgModal.show = true;
    },
    // 图片
    handlefileList() {
      this.fileList2 = [];
      if (this.imgListData.length > 0) {
        this.imgListData.forEach(item => {
          this.fileList2.push({
            url: item.url,
          })
        })
        this.hide = this.fileList2.length >= this.params.limit;
      } else {
        this.fileList2 = [];
        this.hide = false;
      }
    },


    /************* 公共方法 *************/
    // 图片校验
    beforeUpload(file) {
      let name = file.name.split('.')[0];
      let type = file.name.split('.')[1];
      let fileType = this.params.fileType ? this.params.fileType : ['jpg', 'png', 'jpeg'];
      let regFileName = /^\w+$/g;
      let regOtherName = /^[\u4E00-\u9FA5a-zA-Z0-9_-]{3,20}$/;
      // 文件名校验：大小写字母、数字、下划线
      if (!regFileName.test(name)) {
        this.$Message.error("文件名只能包含数字、字母、下划线，请上传正确的文件名！");
        this.isChecked = false;
        return false
      }
      // 格式校验
      else if (fileType.indexOf(type) == -1) {
        this.$Message.error("仅支持" + fileType.toString() + "格式，请上传正确的格式！");
        this.isChecked = false;
        return false
      }
      // 大小校验：100M
      else if ((file.size / (1024 * 1024)) > 100) {
        this.$Message.error("请上传小于100MB的文件");
        this.isChecked = false;
        return false
      }
    },
  },
  filters: {}
}
</script>

<style lang="scss" scoped>
.upload {
  width: 100%;

  .uploadBtn {
    width: 100%;
  }

  .fileClass {
    position: relative;
  }

  .hide {
    position: relative;
  }
}

::v-deep .el-button [class*=el-icon-]+span {
  margin-left: 0 !important;
}

// ::v-deep .el-upload-list{
//   // position: absolute;
//   // top: 0px;
//   // left: 0px;
// }
::v-deep input[type=file] {
  display: none !important;
}
</style>